<template>
  <!-- 1数学几何计算/3向量归一化/ -->
  <div @click="clickObj" id="webgl" class="main"></div>
</template>
<script setup>
// import TWEEN from "@tweenjs/tween.js";
import * as THREE from "three";
import { onMounted } from "vue";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 引入CSS2渲染器CSS2DRenderer和CSS2模型对象CSS2DObject
import Mesh from "./mesh.js";
import camera from "./camera.js";
// 创建一个3D场景scene
const scene = new THREE.Scene();
const { model } = Mesh;
scene.add(model);
// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);
//光源设置
const ambient = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambient);
var width = window.innerWidth;
var height = window.innerHeight;
// 将相机添加到场景
scene.add(camera);
// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true, //添加抗锯齿
  preserveDrawingBuffer: true,
});
renderer.setSize(width, height);
// renderer.outputEncoding = THREE.sRGBEncoding;

// 设置相机控件轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
console.log(controls);
const render = () => {
  renderer.render(scene, camera);
  // 浏览器用于定时循环操作某一个函数，一秒钟60次左右
  window.requestAnimationFrame(render);
};

render();
window.onresize = function () {
  width = window.innerWidth;
  height = window.innerHeight;
  renderer.setSize(width, height);
};
onMounted(() => {
  document.getElementById("webgl").appendChild(renderer.domElement);
});
</script>
<style scoped>
</style>